<script setup lang="ts">
import { ref } from "vue";
import { useLocalStore } from "@/views/layer/gismap/store";

const emitEvents = defineEmits(["toggleShowLayerManager"]);
const store = useLocalStore();
const radio = ref(true);
watchEffect(() => {
  store.setMarkerClusterFlag(radio.value);
});
</script>

<template>
  <div class="cluster-switch">
    <!-- <span class="layer" @click="emitEvents('toggleShowLayerManager')"
      >图层</span
    > -->
    <span class="cluster-tips">聚集显示</span>
    <el-switch
      class="ml-2"
      v-model="radio"
      style="
        -el-switch-on-color: #13ce66;

        --el-switch-off-color: #ff4949;
      "
    />
  </div>
</template>

<style scoped lang="scss">
.cluster-switch {
  // position: absolute;
  // top: 0;
  // right: 17px;
  // z-index: 1000;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // width: 285px;
  // height: 66px;
  // background-color: rgb(255 255 255 / 100%);
}

.layer {
  // display: inline-block;
  // width: 65px;
  // height: 65px;
  // margin-left: 35px;
  // font-size: 14px;
  // line-height: 65px;
  // color: #fff;
  // text-align: center;
  // cursor: pointer;
  // background: #1990ff;
  // border-radius: 50%;
}

.cluster-tips {
  // margin: 0 25px 0 32px;
  // font-family: PingFangSC-bold, sans-serif;
  // font-size: 20px;
  // line-height: 28px;
  // color: rgb(0 0 0 / 100%);
  // text-align: left;
}
</style>
